<template>
    <div class="main">
        <div style="box-shadow: 2px 2px 20px 2px #DDDDDD;margin: 0 2px;">
            <el-tabs type="border-card" >
                <el-tab-pane label="我的信息" >
                <el-form
                    :model="detaildata"
                    :inline="true"
                    label-width="150px"
                    class="demo-ruleForm"
                    style="padding-bottom: 20px;"
                >
                    <el-form-item label="*用户账号" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.username" readonly minlength="500"></el-input>
                    </el-form-item>
                    <el-form-item label="*用户名称" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.nickname" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="*性别" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.sex" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="*类型" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.type" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.phone" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.email" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="生效时间"  style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input prefix-icon="el-icon-date" v-model="detaildata.createtime" readonly disabled style="color: black;"></el-input>
                    </el-form-item>
                    <el-form-item label="详细住址"  style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.homeaddress" readonly disabled></el-input>
                    </el-form-item>
                    <el-form-item label="我的车位"  style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.parkname" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="计费状态"  style="margin-top: 20px ;margin-bottom: 20px;width: 50%;">
                    <el-input v-model="detaildata.coststatus" readonly></el-input>
                    </el-form-item>
                    <el-form-item class="lastform" label="我的描述"  style="margin-top: 20px ;margin-bottom: 20px;width: 100%;">
                        <el-input type="textarea" v-model="detaildata.note" readonly ></el-input>
                    </el-form-item>
                    
                </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <h3 style="margin: 10px 0;padding-left: 10px;">头像信息/更换</h3>
        <div style="margin: 2px 2px;box-shadow: 0 0 20px 2px #DDDDDD ; padding-left: 20px;padding-top: 20px;padding-bottom: 20px;display: flex;">
          <img :src="img" alt="" height="260" width="240" style="margin-right: 10px;">
          <el-upload
          :action="imgurl"
          :headers="imgpage"
          :show-file-list = "false"	
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="successimg"
          :on-change="changeimg"
          :on-remove="handleRemove"
          class="avatar-uploader"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </div>
    </div>
  </template>
    
    <script>
  export default {
    data() {
      return {
        // 图片链接
        img:"http://community.byesame.com/file/",
        detaildata:{},
        messagepage: {
          id: "",
          token: sessionStorage.getItem("token")
        },
        //图片上传载荷
        imgpage:{
          token: sessionStorage.getItem("token"),
        },
        imgurl:`http://community.byesame.com/users/updateIcon?token=${sessionStorage.getItem("token")}`,
        dialogImageUrl: '',
        dialogVisible: false,
        hideUpload: false,
        smallimg:"",
         imageUrl: '',
      };
    },
    created() {
      this.detailmessage();
    },
    methods: {
  
      //详细页得到数据
      detailmessage() {
          this.$axios.post("http://community.byesame.com/users/getMyId",this.messagepage).then((res) => {
                console.log(res,"详细接口")
                this.detaildata = res.data[0]
                this.img +=this.detaildata.icon
                if(this.detaildata.type == 1){
                    this.detaildata.type = "管理员"
                }else{
                    this.detaildata.type ="普通用户"
                }
                const date = new Date(this.detaildata.createtime);  
                const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()}`;
                this.detaildata.createtime = formattedTime;
            });
      },
      //图片上传
      handleRemove(file, fileList) {
        console.log(file, fileList,);

      },
      handlePictureCardPreview(file) {
        
        console.log(this.smallimg,"图片")
        console.log(file)
      },
      successimg(res, file){
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      changeimg(){

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
        
    },
  };
  </script>
    
    <style scoped lang="scss">
  .main {
    position: relative;
  }
  ::v-deep .hide .el-upload--picture-card {
    display: none;
  }
  .span1 {
    display: flex;
    align-items: center;
  }
  .button-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    justify-content: space-between;
    position: absolute;
    right: 0px;
    top: 80px;
  }
  .el-button + .el-button {
    margin: 0;
  }
  .el-form--inline .el-form-item {
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 20px;
  }
  .demo-ruleForm {
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep .el-form--inline .el-form-item__content{
    width: 70%;
  }
  ::v-deep .lastform .el-form-item__content{
    width: 85%;
  }
  
  .editor {
    height: 500px;
    width: 100%;
  }
  .el-form-item {
    width: 92%;
  }
  .list {
    display: flex;
    line-height: 50px;
    width: 100%;
  }
  .list-title {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
  }
  .list-content {
    flex: 8;
  }
  ::v-deep .el-input.is-disabled .el-input__inner{
    color: black;
  }
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
 
  ::v-deep .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
  </style>